<template>
  <!-- 会员状态操作 -->
  <u-dialog :title="title" :show.sync="show" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm" width="1080px">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="name" label="姓名">
            <el-input v-model="dataForm.name" placeholder="姓名" clearable disabled minlength="1" maxlength="20" show-word-limit />
          </el-form-item>
          <el-form-item prop="merchantName" label="专柜">
            <el-input :value="dataForm.merchantName" placeholder="专柜" disabled clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="mobile" label="手机">
            <el-input v-model="dataForm.mobile" placeholder="手机号" disabled maxlength="11" clearable show-word-limit />
          </el-form-item>
          <el-form-item prop="floor" label="楼层">
            <el-input v-model="dataForm.floor" placeholder="卡号" disabled clearable />
          </el-form-item>
        </el-col>
        <el-form-item prop="mealCardNo" label="餐卡">
          <el-input v-model="dataForm.mealCardNo" placeholder="卡号" disabled clearable />
        </el-form-item>
      </el-row>
      <el-form-item prop="mealCost" label="餐费标准">
        <el-input v-model="dataForm.mealCost" placeholder="请输入每月餐费标准" clearable />
        <u-tip-info style="color: red; font-weight: 900; font-size: 20px;">每月餐费标准,每月月底自动执行</u-tip-info>
      </el-form-item>
    </el-form>
  </u-dialog>
</template>
<script>
/**
 * 业务组件 - 会员状态操作
 */
export default {
  name: 'Meal',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuide,
      title: '导购餐费',
      dataForm: {},
      rules: {
        remark: [
          { required: true, message: '请输入备注以方便追溯历史原因', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        this.dataForm = this.$u.deepClone(this.data)
        // console.log(this.dataForm)
        const { name } = this.dataForm
        this.title = '导购餐费:查询【' + name + '】'
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      self.$confirm('此操作将更改 【' + self.dataForm.name + '】 的导购餐费，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 效验数据格式
        self.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 提交更新数据
            self.api.meal(self.dataForm).then(() => {
              // 通知信息
              self.$u.msg('更改成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }
        })
      }).catch(() => {
      })

      self.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
